/**
 * 实施路径组件
 * 展示产品的三阶段实施路径和市场推广策略
 */

import { motion } from "framer-motion";

interface ImplementationSectionProps {
    sectionRef: (el: HTMLElement | null) => void;
}

export default function ImplementationSection({ sectionRef }: ImplementationSectionProps) {
    return (
        <section
            ref={sectionRef}
            className="py-20 bg-white">
            <div className="max-w-7xl mx-auto px-6">
                <motion.div
                    initial={{
                        opacity: 0,
                        y: 20
                    }}
                    whileInView={{
                        opacity: 1,
                        y: 0
                    }}
                    transition={{
                        duration: 0.6
                    }}
                    viewport={{
                        once: true
                    }}>
                    <h2 className="text-3xl md:text-4xl font-bold text-center mb-16">实施路径</h2>
                </motion.div>
                
                <div className="grid md:grid-cols-12 gap-10">
                    {/* 左侧实施路径 */}
                    <div className="md:col-span-7">
                        <h3 className="text-2xl font-semibold text-teal-800 mb-8">三阶段实施路径</h3>
                        <div className="space-y-12">
                            {/* 基础建设期 */}
                            <motion.div
                                initial={{
                                    opacity: 0,
                                    x: -30
                                }}
                                whileInView={{
                                    opacity: 1,
                                    x: 0
                                }}
                                transition={{
                                    duration: 0.5
                                }}
                                viewport={{
                                    once: true
                                }}
                                className="bg-white border border-teal-100 p-6 rounded-2xl shadow-lg">
                                <div className="flex">
                                    <div className="bg-teal-600 w-16 h-16 rounded-full flex items-center justify-center text-white font-bold text-2xl flex-shrink-0">1</div>
                                    <div className="ml-6">
                                        <h4 className="text-xl font-bold text-teal-800 mb-4">基础建设期（0-6个月）</h4>
                                        <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                                            <div className="bg-teal-50 p-4 rounded-xl">
                                                <div className="flex items-center">
                                                    <div className="bg-teal-600 p-2 rounded-full mr-3">
                                                        <i className="fa-solid fa-database text-white text-sm"></i>
                                                    </div>
                                                    <p className="text-sm font-medium text-teal-800">数据收集与标注</p>
                                                </div>
                                                <p className="text-xs text-teal-600 mt-2 ml-11">构建1.5万+高质量简历训练集</p>
                                            </div>
                                            <div className="bg-teal-50 p-4 rounded-xl">
                                                <div className="flex items-center">
                                                    <div className="bg-teal-600 p-2 rounded-full mr-3">
                                                        <i className="fa-solid fa-code text-white text-sm"></i>
                                                    </div>
                                                    <p className="text-sm font-medium text-teal-800">模型选型与微调</p>
                                                </div>
                                                <p className="text-xs text-teal-600 mt-2 ml-11">基于Qwen系列模型进行SFT微调</p>
                                            </div>
                                            <div className="bg-teal-50 p-4 rounded-xl">
                                                <div className="flex items-center">
                                                    <div className="bg-teal-600 p-2 rounded-full mr-3">
                                                        <i className="fa-solid fa-cogs text-white text-sm"></i>
                                                    </div>
                                                    <p className="text-sm font-medium text-teal-800">技术架构搭建</p>
                                                </div>
                                                <p className="text-xs text-teal-600 mt-2 ml-11">OCR+NLP+微调小模型架构设计</p>
                                            </div>
                                            <div className="bg-teal-50 p-4 rounded-xl">
                                                <div className="flex items-center">
                                                    <div className="bg-teal-600 p-2 rounded-full mr-3">
                                                        <i className="fa-solid fa-flask text-white text-sm"></i>
                                                    </div>
                                                    <p className="text-sm font-medium text-teal-800">MVP原型开发</p>
                                                </div>
                                                <p className="text-xs text-teal-600 mt-2 ml-11">核心功能验证与性能测试</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </motion.div>
                            
                            {/* 产品完善期 */}
                            <motion.div
                                initial={{
                                    opacity: 0,
                                    x: -30
                                }}
                                whileInView={{
                                    opacity: 1,
                                    x: 0
                                }}
                                transition={{
                                    duration: 0.5,
                                    delay: 0.2
                                }}
                                viewport={{
                                    once: true
                                }}
                                className="bg-white border border-blue-100 p-6 rounded-2xl shadow-lg">
                                <div className="flex">
                                    <div className="bg-blue-600 w-16 h-16 rounded-full flex items-center justify-center text-white font-bold text-2xl flex-shrink-0">2</div>
                                    <div className="ml-6">
                                        <h4 className="text-xl font-bold text-blue-800 mb-4">产品完善期（6-12个月）</h4>
                                        <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                                            <div className="bg-blue-50 p-4 rounded-xl">
                                                <div className="flex items-center">
                                                    <div className="bg-blue-600 p-2 rounded-full mr-3">
                                                        <i className="fa-solid fa-language text-white text-sm"></i>
                                                    </div>
                                                    <p className="text-sm font-medium text-blue-800">多语言支持扩展</p>
                                                </div>
                                                <p className="text-xs text-blue-600 mt-2 ml-11">增加日韩等小语种支持</p>
                                            </div>
                                            <div className="bg-blue-50 p-4 rounded-xl">
                                                <div className="flex items-center">
                                                    <div className="bg-blue-600 p-2 rounded-full mr-3">
                                                        <i className="fa-solid fa-tachometer-alt text-white text-sm"></i>
                                                    </div>
                                                    <p className="text-sm font-medium text-blue-800">性能优化</p>
                                                </div>
                                                <p className="text-xs text-blue-600 mt-2 ml-11">提升处理速度至≤5秒/份</p>
                                            </div>
                                            <div className="bg-blue-50 p-4 rounded-xl">
                                                <div className="flex items-center">
                                                    <div className="bg-blue-600 p-2 rounded-full mr-3">
                                                        <i className="fa-solid fa-plug text-white text-sm"></i>
                                                    </div>
                                                    <p className="text-sm font-medium text-blue-800">API接口开发</p>
                                                </div>
                                                <p className="text-xs text-blue-600 mt-2 ml-11">标准化接口与集成方案</p>
                                            </div>
                                            <div className="bg-blue-50 p-4 rounded-xl">
                                                <div className="flex items-center">
                                                    <div className="bg-blue-600 p-2 rounded-full mr-3">
                                                        <i className="fa-solid fa-shield-alt text-white text-sm"></i>
                                                    </div>
                                                    <p className="text-sm font-medium text-blue-800">安全合规建设</p>
                                                </div>
                                                <p className="text-xs text-blue-600 mt-2 ml-11">数据隐私保护与合规审核</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </motion.div>
                            
                            {/* 规模化推广期 */}
                            <motion.div
                                initial={{
                                    opacity: 0,
                                    x: -30
                                }}
                                whileInView={{
                                    opacity: 1,
                                    x: 0
                                }}
                                transition={{
                                    duration: 0.5,
                                    delay: 0.4
                                }}
                                viewport={{
                                    once: true
                                }}
                                className="bg-white border border-purple-100 p-6 rounded-2xl shadow-lg">
                                <div className="flex">
                                    <div className="bg-purple-600 w-16 h-16 rounded-full flex items-center justify-center text-white font-bold text-2xl flex-shrink-0">3</div>
                                    <div className="ml-6">
                                        <h4 className="text-xl font-bold text-purple-800 mb-4">规模化推广期（12-24个月）</h4>
                                        <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                                            <div className="bg-purple-50 p-4 rounded-xl">
                                                <div className="flex items-center">
                                                    <div className="bg-purple-600 p-2 rounded-full mr-3">
                                                        <i className="fa-solid fa-chart-line text-white text-sm"></i>
                                                    </div>
                                                    <p className="text-sm font-medium text-purple-800">市场拓展</p>
                                                </div>
                                                <p className="text-xs text-purple-600 mt-2 ml-11">建立多元化销售渠道</p>
                                            </div>
                                            <div className="bg-purple-50 p-4 rounded-xl">
                                                <div className="flex items-center">
                                                    <div className="bg-purple-600 p-2 rounded-full mr-3">
                                                        <i className="fa-solid fa-handshake text-white text-sm"></i>
                                                    </div>
                                                    <p className="text-sm font-medium text-purple-800">生态合作</p>
                                                </div>
                                                <p className="text-xs text-purple-600 mt-2 ml-11">与招聘平台和HR系统集成</p>
                                            </div>
                                            <div className="bg-purple-50 p-4 rounded-xl">
                                                <div className="flex items-center">
                                                    <div className="bg-purple-600 p-2 rounded-full mr-3">
                                                        <i className="fa-solid fa-globe text-white text-sm"></i>
                                                    </div>
                                                    <p className="text-sm font-medium text-purple-800">国际化拓展</p>
                                                </div>
                                                <p className="text-xs text-purple-600 mt-2 ml-11">进入东南亚和欧美市场</p>
                                            </div>
                                            <div className="bg-purple-50 p-4 rounded-xl">
                                                <div className="flex items-center">
                                                    <div className="bg-purple-600 p-2 rounded-full mr-3">
                                                        <i className="fa-solid fa-robot text-white text-sm"></i>
                                                    </div>
                                                    <p className="text-sm font-medium text-purple-800">产品迭代升级</p>
                                                </div>
                                                <p className="text-xs text-purple-600 mt-2 ml-11">智能匹配与人才画像功能</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </motion.div>
                        </div>
                    </div>
                    
                    {/* 右侧市场推广策略 */}
                    <div className="md:col-span-5 flex flex-col">
                        <h3 className="text-2xl font-semibold text-teal-800 mb-8">市场推广策略</h3>
                        
                        {/* 多渠道营销策略 */}
                        <motion.div
                            initial={{
                                opacity: 0,
                                x: 30
                            }}
                            whileInView={{
                                opacity: 1,
                                x: 0
                            }}
                            transition={{
                                duration: 0.6
                            }}
                            viewport={{
                                once: true
                            }}
                            className="bg-white p-6 rounded-2xl shadow-lg mb-8 flex-grow">
                            <h4 className="text-xl font-semibold text-teal-800 mb-6">多渠道营销策略</h4>
                            <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                                <div className="bg-teal-50 p-4 rounded-xl">
                                    <div className="flex items-center">
                                        <div className="bg-teal-600 p-2 rounded-full mr-3">
                                            <i className="fa-solid fa-bullhorn text-white text-sm"></i>
                                        </div>
                                        <p className="text-sm font-medium text-teal-800">内容营销</p>
                                    </div>
                                    <ul className="text-xs text-teal-600 mt-3 ml-11 space-y-1">
                                        <li>• 技术白皮书发布</li>
                                        <li>• 行业案例分享</li>
                                        <li>• 专家观点文章</li>
                                    </ul>
                                </div>
                                <div className="bg-blue-50 p-4 rounded-xl">
                                    <div className="flex items-center">
                                        <div className="bg-blue-600 p-2 rounded-full mr-3">
                                            <i className="fa-solid fa-comments text-white text-sm"></i>
                                        </div>
                                        <p className="text-sm font-medium text-blue-800">社交媒体</p>
                                    </div>
                                    <ul className="text-xs text-blue-600 mt-3 ml-11 space-y-1">
                                        <li>• LinkedIn精准投放</li>
                                        <li>• 微信公众号运营</li>
                                        <li>• 行业社群建设</li>
                                    </ul>
                                </div>
                                <div className="bg-purple-50 p-4 rounded-xl">
                                    <div className="flex items-center">
                                        <div className="bg-purple-600 p-2 rounded-full mr-3">
                                            <i className="fa-solid fa-laptop text-white text-sm"></i>
                                        </div>
                                        <p className="text-sm font-medium text-purple-800">线上推广</p>
                                    </div>
                                    <ul className="text-xs text-purple-600 mt-3 ml-11 space-y-1">
                                        <li>• SEM关键词投放</li>
                                        <li>• 行业网站广告</li>
                                        <li>• 电子邮件营销</li>
                                    </ul>
                                </div>
                                <div className="bg-green-50 p-4 rounded-xl">
                                    <div className="flex items-center">
                                        <div className="bg-green-600 p-2 rounded-full mr-3">
                                            <i className="fa-solid fa-users text-white text-sm"></i>
                                        </div>
                                        <p className="text-sm font-medium text-green-800">线下活动</p>
                                    </div>
                                    <ul className="text-xs text-green-600 mt-3 ml-11 space-y-1">
                                        <li>• HR科技峰会</li>
                                        <li>• 行业展会参展</li>
                                        <li>• 技术沙龙</li>
                                    </ul>
                                </div>
                            </div>
                        </motion.div>
                        
                        {/* 合作伙伴生态策略 */}
                        <motion.div
                            initial={{
                                opacity: 0,
                                x: 30
                            }}
                            whileInView={{
                                opacity: 1,
                                x: 0
                            }}
                            transition={{
                                duration: 0.6,
                                delay: 0.3
                            }}
                            viewport={{
                                once: true
                            }}
                            className="bg-white p-6 rounded-2xl shadow-lg">
                            <h4 className="text-xl font-semibold text-blue-800 mb-6">合作伙伴生态策略</h4>
                            <div className="space-y-4">
                                <div className="bg-gradient-to-r from-teal-50 to-blue-50 p-4 rounded-xl">
                                    <div className="flex items-center">
                                        <div className="bg-teal-600 p-2 rounded-full mr-3">
                                            <i className="fa-solid fa-building text-white text-sm"></i>
                                        </div>
                                        <div>
                                            <p className="text-sm font-medium text-teal-800">招聘平台集成</p>
                                            <p className="text-xs text-teal-600 mt-1">与主流招聘网站建立API对接，实现简历一键解析功能</p>
                                        </div>
                                    </div>
                                </div>
                                <div className="bg-gradient-to-r from-blue-50 to-purple-50 p-4 rounded-xl">
                                    <div className="flex items-center">
                                        <div className="bg-blue-600 p-2 rounded-full mr-3">
                                            <i className="fa-solid fa-cog text-white text-sm"></i>
                                        </div>
                                        <div>
                                            <p className="text-sm font-medium text-blue-800">HR系统合作</p>
                                            <p className="text-xs text-blue-600 mt-1">与主流HR SaaS系统深度集成，提供一站式招聘解决方案</p>
                                        </div>
                                    </div>
                                </div>
                                <div className="bg-gradient-to-r from-purple-50 to-teal-50 p-4 rounded-xl">
                                    <div className="flex items-center">
                                        <div className="bg-purple-600 p-2 rounded-full mr-3">
                                            <i className="fa-solid fa-handshake text-white text-sm"></i>
                                        </div>
                                        <div>
                                            <p className="text-sm font-medium text-purple-800">渠道代理合作</p>
                                            <p className="text-xs text-purple-600 mt-1">建立区域代理商网络，覆盖全国主要城市和行业垂直市场</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </motion.div>
                    </div>
                </div>
            </div>
        </section>
    );
}